import React, { useState } from 'react';
import { Layout, Menu, Breadcrumb, Row, Col, Input, Form, Button, Table, Radio, Divider, DatePicker, TimePicker } from 'antd';

const QingLiGuoQiShuJu = () => {
    const [selectionType, setSelectionType] = useState('checkbox');

    const formItemLayout = {
        labelCol: {
            xs: {
                span: 24,
            },
            sm: {
                span: 8,
            },
        },
        wrapperCol: {
            xs: {
                span: 24,
            },
            sm: {
                span: 16,
            },
        },
    };
    const rangeConfig = {
        rules: [
            {
                type: 'array',
                required: false,
                message: 'Please select time!',
            },
        ],
    };
    const paginationProps = {
        page: 10,
        // onChange : (page) => this.handleTableChange(page),
        total: 100,
        showQuickJumper: true,
        showTotal: (total, range) => `共${total}条数据`,
        position: ["bottomCenter"]
    }
    const columns = [
        {
            title: '住院号',
            dataIndex: 'zhuyuanhao',
        },
        {
            title: '入院日期',
            dataIndex: 'ruyuanriqi',
        },
        {
            title: '出院日期',
            dataIndex: 'chuyuanriqi',
        },
        {
            title: '姓名',
            dataIndex: 'name',
        },
        {
            title: '性别',
            dataIndex: 'sex',
        },
        {
            title: '科室',
            dataIndex: 'keshi',
        },
        {
            title: '床位',
            dataIndex: 'chuangwei',
        },
        {
            title: '身份证号',
            dataIndex: 'shenfenzhenghao',
        },
    ]
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record) => ({
            disabled: record.name === 'Disabled User',
            // Column configuration not to be checked
            name: record.name,
        }),
    };
    const data = [
        {
            zhuyuanhao: "00001",
            ruyuanriqi: "2020-10-01 15:20:20",
            chuyuanriqi:"2020-10-30 15:20:20",
            name:"李四",
            sex:"男",
            keshi:"外科",
            chuangwei:"001",
            shenfenzhenghao:"510712123156456",
        },
        {
            zhuyuanhao: "00001",
            ruyuanriqi: "2020-10-01 15:20:20",
            chuyuanriqi:"2020-10-30 15:20:20",
            name:"李四",
            sex:"男",
            keshi:"外科",
            chuangwei:"001",
            shenfenzhenghao:"510712123156456",
        },
        {
            zhuyuanhao: "00001",
            ruyuanriqi: "2020-10-01 15:20:20",
            chuyuanriqi:"2020-10-30 15:20:20",
            name:"李四",
            sex:"男",
            keshi:"外科",
            chuangwei:"001",
            shenfenzhenghao:"510712123156456",
        },
    ]
    
    return (
        <>
            <Row>
                <Row>
                    <Breadcrumb style={{ marginBottom: 24 }}>
                        <Breadcrumb.Item>系统维护</Breadcrumb.Item>
                        <Breadcrumb.Item>清理过期数据</Breadcrumb.Item>
                    </Breadcrumb>
                </Row>
            </Row>
            <Row>
                <Col span={24}>
                    <div className="site-layout-background" style={{ padding: 24, margin: 12, minHeight: 100 }}>
                        <h3 style={{ fontSize: "30px", fontWeight: 700 }}>住院病人统计</h3>
                    </div>
                </Col>
            </Row>
            <Row>
                <Col span="24">
                    <div className="site-layout-background" style={{ padding: 24, margin: 12, minHeight: 100 }}>
                        <Row>
                            <Col span="10">
                                <Form layout="inline" {...formItemLayout}>
                                    {/* <Form.Item
                                        label="收费项目："
                                        name="shoufeixiangmu"
                                    >
                                        <Select options={options} style={{width:150}}></Select>
                                    </Form.Item> */}
                                    <Form.Item
                                        label="入院时间："
                                        name="start"
                                        {...rangeConfig}
                                    >
                                        <DatePicker showTime style={{ width: 200 }} />
                                    </Form.Item>
                                    <Form.Item
                                        label="出院时间："
                                        name="end"
                                        {...rangeConfig}
                                    >
                                        <DatePicker showTime style={{ width: 200 }} />
                                    </Form.Item>
                                </Form>
                            </Col>
                            <Col>
                                <Button type="primary">
                                    查询
                                </Button>
                            </Col>
                        </Row>

                    </div>
                </Col>
            </Row>
            <Row>
                <Col span="24">
                    <div className="site-layout-background" style={{ padding: 24, margin: 12, minHeight: 300 }}>
                        <Row>
                            <Col span="2">
                                <Button>删除</Button>
                            </Col>
                            <Col span="2">
                                <Button>清理数据</Button>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="24">
                                <Table
                                    rowSelection={{
                                        type: selectionType,
                                        ...rowSelection,
                                    }}
                                    columns={columns}
                                    dataSource={data}
                                    pagination={paginationProps}
                                />
                            </Col>
                        </Row>

                    </div>
                </Col>
            </Row>
        </>
    );
}

export default QingLiGuoQiShuJu;
